<template>
  <mxp-popup ref="popupRef" model="center" :showToolbar="false" background="transparent" :zIndex="data.zIndex">
    <!-- iOS 风格 -->
    <view v-if="data.isIosStyle" key="view-1" class="mxp-modal-ios-box" :style="[data.modalStyle]">
      <view v-if="data.title" class="title-box">
        <text class="title" :style="[data.titleStyle]">{{ data.title }}</text>
      </view>
      <view
        v-if="data.content"
        key="view-2"
        style="padding: 0 30rpx"
        class="content-box"
        :style="[{ paddingTop: data.title ? '15px' : '0px' }, data.contentViewStyle]"
      >
        <text class="content" :style="[data.contentStyle, { maxWidth: `540rpx` }]">{{ data.content }}</text>
      </view>
      <mxp-line margin="30px 0px 0px 0px"></mxp-line>
      <view class="button-box">
        <view class="button cancel" style="border-radius: 0 0 0 10px" hoverClass="hover" :style="[data.cancelButtonStyle]" @click="cancelHandler">
          <text class="text" :style="[data.cancelTextStyle]">{{ data.cancelText }}</text>
        </view>
        <mxp-line direction="col" length="50px"></mxp-line>
        <view
          class="button confirm"
          style="border-radius: 0 0 10px"
          :class="data.loading ? 'disabled' : ''"
          hoverClass="hover"
          :style="[data.confirmButtonStyle]"
          @click="confirmHandler"
        >
          <mxp-icon v-if="data.loading" :spin="true" :size="data.loadingSize" :color="data.loadingColor"></mxp-icon>
          <text class="text" :style="[{ color: data.themeColor }, data.confirmTextStyle]">{{ data.confirmText }}</text>
        </view>
      </view>
    </view>
    <!-- 非 iOS 风格 -->
    <view v-else key="view-2" class="mxp-modal-box" :style="[data.modalStyle]">
      <view v-if="data.title" class="title-box">
        <text class="title" :style="[data.titleStyle]">{{ data.title }}</text>
      </view>
      <slot>
        <view v-if="data.content" class="content-view" :style="[{ paddingTop: data.title ? '15px' : '0px' }, data.contentViewStyle]">
          <text class="content" :style="[data.contentStyle, { maxWidth: `540rpx` }]">{{ data.content }}</text>
        </view>
      </slot>
      <view class="button-view" :style="[data.buttonViewStyle]">
        <view class="button cancel" hoverClass="hover" :style="[{ borderColor: data.themeColor }, data.cancelButtonStyle]" @click="cancelHandler">
          <text class="text" :style="[{ fontSize: '16px', color: data.themeColor }, data.cancelTextStyle]">{{ data.cancelText }}</text>
        </view>
        <view
          class="button confirm"
          :class="data.loading ? 'disabled' : ''"
          hoverClass="hover"
          :style="[{ background: data.themeColor }, data.confirmButtonStyle]"
          @click="confirmHandler"
        >
          <mxp-icon v-if="data.loading" :spin="true" :size="data.loadingSize" :color="data.loadingColor"></mxp-icon>
          <text class="text" :style="[data.confirmTextStyle]">{{ data.confirmText }}</text>
        </view>
      </view>
    </view>
  </mxp-popup>
</template>

<script lang="ts" setup>
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  import MxpPopup from '../mxp-popup/mxp-popup.vue';
  import MxpLine from '../mxp-line/mxp-line.vue';
  import { type CSSProperties, type PropType, ref, shallowReactive } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  export type $Options = {
    /** 是否为 ios 风格 */
    isIosStyle?: boolean;
    /** 是否加载中 */
    loading?: boolean;
    /** 层级 */
    zIndex?: number;
    /** 主题色 */
    themeColor?: $AllColorStr;
    /** 确定按钮的回调 */
    confirmCallBack?: () => void;
    /** 取消按钮的回调 */
    cancelCallBack?: () => void;
    /** 是否为异步关闭 */
    asyncClose?: boolean;
    /** 加载动画大小 */
    loadingSize?: $SizeUnitStr;
    /** 加载动画颜色 */
    loadingColor?: $AllColorStr;
    /** 弹窗内容文案 */
    title?: number | string;
    /** 弹窗内容文案 */
    content?: number | string;
    /** 确定按钮文案 */
    confirmText?: number | string;
    /** 取消按钮文案 */
    cancelText?: number | string;
    /** 弹窗内容样式 */
    titleStyle?: CSSProperties;
    /** 弹窗样式 */
    modalStyle?: CSSProperties;
    /** 弹窗内容容器样式 */
    contentViewStyle?: CSSProperties;
    /** 弹窗内容文本样式 */
    contentStyle?: CSSProperties;
    /** 两个按钮的容器样式 */
    buttonViewStyle?: CSSProperties;
    /** 确认按钮样式 */
    confirmButtonStyle?: CSSProperties;
    /** 取消按钮样式 */
    cancelButtonStyle?: CSSProperties;
    /** 确认按钮文字样式 */
    confirmTextStyle?: CSSProperties;
    /** 取消按钮文字样式 */
    cancelTextStyle?: CSSProperties;
  };

  defineOptions({
    name: 'mxp-modal',
  });

  const props = defineProps({
    /** 是否为 ios 风格 */
    isIosStyle: { type: Boolean, default: true },
    /** 主题色 */
    themeColor: { type: String as PropType<$AllColorStr>, default: '#3399ff' },
  });

  defineSlots<{
    /** 自定义内容 */
    default: () => void;
  }>();

  const popupRef = ref<InstanceType<typeof MxpPopup> | null>(null);
  const data = shallowReactive<$Options>({
    isIosStyle: true, // 是否为 ios 风格
    loading: false,
    zIndex: 888, // zIndex
    themeColor: '#3399ff', // 主题色
    confirmCallBack: undefined, // 确定按钮的回调
    cancelCallBack: undefined, // 取消按钮的回调
    asyncClose: false, // 是否为异步关闭
    loadingSize: '16px', // 加载动画大小
    loadingColor: '#ffffff', // 加载动画颜色
    title: '', // 弹窗内容文案
    content: '', // 弹窗内容文案
    confirmText: '确定', // 确定按钮文案
    cancelText: '取消', // 取消按钮文案
    titleStyle: {}, // 弹窗内容样式
    contentStyle: {}, // 弹窗内容样式
    modalStyle: {}, // 弹窗样式
    contentViewStyle: {},
    buttonViewStyle: {},
    confirmButtonStyle: {}, // 确认按钮样式
    cancelButtonStyle: {}, // 取消按钮样式
    confirmTextStyle: {}, // 确认按钮文字样式
    cancelTextStyle: {}, // 取消按钮文字样式
  });

  /** 显示 */
  function show(param: $Options = {}) {
    data.isIosStyle = typeof param.isIosStyle === 'boolean' ? param.isIosStyle : props.isIosStyle; // 是否为 ios 风格
    data.loading = false;
    data.zIndex = typeof param.zIndex === 'number' ? param.zIndex : 888; // zIndex
    data.themeColor = param.themeColor ? param.themeColor : props.themeColor; // 主题色
    data.confirmCallBack = param.confirmCallBack && typeof param.confirmCallBack === 'function' ? param.confirmCallBack : undefined; // 确定按钮的回调
    data.cancelCallBack = param.cancelCallBack && typeof param.cancelCallBack === 'function' ? param.cancelCallBack : undefined; // 取消按钮的回调
    data.loadingSize = param.loadingSize ? param.loadingSize : '16px'; // 加载动画大小
    data.loadingColor = param.loadingColor ? param.loadingColor : '#ffffff'; // 加载动画颜色
    data.asyncClose = 'asyncClose' in param ? Boolean(param.asyncClose) : false; // 是否为异步关闭
    data.title = param.title ? param.title : ''; // 标题内容文案
    data.content = param.content ? param.content : ''; // 弹窗内容文案
    data.confirmText = param.confirmText ? param.confirmText : '确定'; // 确定按钮文案
    data.cancelText = param.cancelText ? param.cancelText : '取消'; // 取消按钮文案
    data.modalStyle = param.modalStyle ? param.modalStyle : {}; // 弹窗样式
    data.titleStyle = param.contentStyle ? param.titleStyle : {}; // 标题内容样式
    data.contentStyle = param.contentStyle ? param.contentStyle : {}; // 弹窗内容样式
    data.confirmButtonStyle = param.confirmButtonStyle ? param.confirmButtonStyle : {}; // 确认按钮样式
    data.cancelButtonStyle = param.cancelButtonStyle ? param.cancelButtonStyle : {}; // 取消按钮样式
    data.confirmTextStyle = param.confirmTextStyle ? param.confirmTextStyle : {}; // 确认按钮文字样式
    data.cancelTextStyle = param.cancelTextStyle ? param.cancelTextStyle : {}; // 取消按钮文字样式
    popupRef.value?.show();
  }
  /** 隐藏 */
  function hide() {
    popupRef.value?.hide();
  }

  /** 点击确定按钮 */
  function confirmHandler() {
    // 如果配置了异步关闭，将按钮值为loading状态
    if (!data.loading) {
      if (data.asyncClose) {
        data.loading = true;
      } else {
        hide();
      }
      data.confirmCallBack && data.confirmCallBack();
    }
  }

  /** 点击取消按钮 */
  function cancelHandler() {
    hide();
    data.cancelCallBack && data.cancelCallBack();
  }

  /** 手动关闭加载状态 */
  function closeLoading() {
    data.loading = false;
  }

  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
    /** 手动关闭加载状态 */
    closeLoading,
  });
</script>

<style lang="scss" scoped>
  .mxp-modal-ios-box {
    width: 600rpx;
    padding-top: 30px;
    background: #ffffff;
    border-radius: 10px;

    .title-box {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .content-box {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .content {
        font-size: 14px;
        color: #555555;
      }
    }

    .button-box {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-around;

      .button {
        display: flex;
        flex: 1;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        height: 50px;

        .text {
          font-size: 16px;
        }

        &.confirm .text {
          color: #3399ff;
        }

        &.disabled {
          opacity: 0.7;
        }

        &.cancel .text {
          color: #c0c4cc;
        }
      }

      .hover {
        background-color: #f2f2f2;
      }
    }
  }

  .mxp-modal-box {
    width: 600rpx;
    padding: 15px;
    padding-top: 30px;
    background: #ffffff;
    border-radius: 10px;

    .title-box {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .content-view {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .content {
        font-size: 14px;
        color: #555555;
      }
    }

    .button-view {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-around;
      // 非 ios 风格才有padding-top
      padding-top: 30px;

      .button {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 40px;
        border-radius: 10px;

        &.confirm {
          background-color: #3399ff;

          .text {
            color: #ffffff;
          }
        }

        &.disabled {
          opacity: 0.7;
        }

        &.cancel {
          border-color: #3399ff;
          border-style: solid;
          border-width: 1px;

          .text {
            color: #3399ff;
          }
        }
      }

      .hover {
        opacity: 0.8;
      }
    }
  }
</style>
